import { useIntl } from "react-intl"
import { Button,  Row, Col, Input, Table } from "antd"
import CateSelect from "./components/CateSelect"
import { PlusOutlined, ReloadOutlined, ColumnHeightOutlined, SettingOutlined } from "@ant-design/icons"
import "./style.scss"
import { useNavigate } from "react-router-dom"

const columns = [
    {
        title: '商品',
        align: 'center',
        dataIndex: 'name',
        render: (text) => {
            return (
                <div className="good">
                    <img src={`https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg`} alt="" />
                    <div>{text}</div>
                </div>
            )
        },
    },
    {
        title: '价格',
        dataIndex: 'price',
        align: 'center',
        render: text => (
            <div>{`￥${Number(text).toFixed(2)}`}</div>
        )
    },
    {
        title: '品类',
        dataIndex: 'cate',
        align: 'center',
        render: cate => {
            return (
                <div>手机</div>
            )
        }
    },
    {
        title: '是否热销',
        dataIndex: 'hot',
        align: 'center',
        render: text => (
            <div>{text ? '是' : '否'}</div>
        )
    },
    {
        title: '状态',
        dataIndex: 'store_status',
        align: 'center',
        render: text => (
            <div>{text ? '已上架' : '待上架'}</div>
        )
    },
    {
        title: '发布时间',
        dataIndex: 'create_time',
        align: 'center',
        render: text => {
            return (
                <>
                    <div>{text}</div>
                </>
            )
        }
    },
    {
        title: '操作',
        align: 'center',
        render: (_, row) => (
            <>
                <Button
                    type='primary'
                    size='small'
                >
                    编辑
                </Button>
                <Button danger size='small' style={{ marginLeft: '10px' }}>删除</Button>
            </>
        )
    }
]

const data = [
    {
        key: '1',
        name: '小米手机',
        price: 32,
        cate: '手机',
        hot: true,
        store_status: true,
        create_time: "20220202"
    },
];

export default (props) => {
    const intl = useIntl();
    const navigate=useNavigate()

    return (
        <div className="goods-list">
            <div className="filter">
                <Row justify="center" align="middle">
                    <Col span={3}>
                        <span>商品名称：</span>
                    </Col>
                    <Col span={4}>
                        <Input />
                    </Col>
                    <Col span={3}>
                        <span>商品分类：</span>
                    </Col>
                    <Col span={4}>
                        <CateSelect />
                    </Col>
                </Row>
            </div>
            <div className="table">
                <Table
                    rowSelection={{
                        type: "checkbox",
                        onChange: (keys, rows) => {
                            console.log(keys, rows);
                        }
                    }}
                    columns={columns}
                    dataSource={data}
                    title={() => (
                        <Row>
                            <Col span={4}>商品列表</Col>
                            <Col span={6} offset={14} style={{ textAlign: "right" }}>
                                <Button type="primary" icon={<PlusOutlined />} onClick={()=>navigate('/goods/add')}>新增</Button>
                                <div className="table-title">
                                    <ReloadOutlined />
                                    <ColumnHeightOutlined />
                                    <SettingOutlined />
                                </div>
                            </Col>
                        </Row>
                    )}
                    pagination={{
                        total: 30,
                        showSizeChanger: true,
                        showTitle: (total) => `Total ${total} items`
                    }}
                />;
            </div>
        </div>
    )
}